<template>
  <div class="problem-edit-page">
    <!-- 顶部导航栏 -->
    <div class="top-navbar">
      <div class="navbar-container">
        <div class="navbar-left">
          <router-link to="/home" class="logo-link">
            <svg class="logo-icon" viewBox="0 0 48 48" width="36" height="36" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect width="48" height="48" rx="12" fill="url(#logoGradient)"/>
              <path d="M12 32V16L18 24L24 16L30 24L36 16V32" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
              <circle cx="18" cy="25" r="1.5" fill="white" opacity="0.8"/>
              <circle cx="30" cy="25" r="1.5" fill="white" opacity="0.8"/>
              <defs>
                <linearGradient id="logoGradient" x1="0" y1="0" x2="48" y2="48" gradientUnits="userSpaceOnUse">
                  <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
                  <stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
                </linearGradient>
              </defs>
            </svg>
            <span class="logo">M-Learning</span>
          </router-link>
        </div>
        
        <div class="navbar-center">
          <span class="page-title">{{ isEditMode ? '编辑题目' : '创建题目' }}</span>
        </div>
        
        <div class="navbar-right">
          <button class="btn-back" @click="goBack">
            <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
              <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
            </svg>
            返回
          </button>
        </div>
      </div>
    </div>

    <!-- 主内容区 -->
    <div class="main-content">
      <div class="content-container">
        <div v-if="loading" class="loading">
          <svg viewBox="0 0 24 24" width="40" height="40" fill="currentColor" class="spin">
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-3.31 0-6 2.69-6 6h2c0-2.21 1.79-4 4-4V6z"/>
          </svg>
          <p>加载中...</p>
        </div>

        <div v-else class="edit-form">
          <div class="form-section">
            <h3 class="section-title">基本信息</h3>
            
            <div class="form-row">
              <div class="form-group">
                <label class="form-label">课程 <span class="required">*</span></label>
                <select v-model="form.courseId" class="form-select" @change="onCourseChange">
                  <option value="">请选择课程</option>
                  <option v-for="course in courses" :key="course.id" :value="course.id">
                    {{ course.name }}
                  </option>
                </select>
                <span v-if="errors.courseId" class="error-text">{{ errors.courseId }}</span>
              </div>

              <div class="form-group">
                <label class="form-label">章节 <span class="required">*</span></label>
                <select v-model="form.chapterId" class="form-select" :disabled="!form.courseId">
                  <option value="">请选择章节</option>
                  <option v-for="chapter in chapters" :key="chapter.id" :value="chapter.id">
                    {{ chapter.name }}
                  </option>
                </select>
                <span v-if="errors.chapterId" class="error-text">{{ errors.chapterId }}</span>
              </div>
            </div>

            <div class="form-group">
              <label class="form-label">题目标题 <span class="required">*</span></label>
              <input 
                v-model="form.title" 
                type="text" 
                class="form-input" 
                placeholder="例如：求函数的极限"
              />
              <span v-if="errors.title" class="error-text">{{ errors.title }}</span>
            </div>

            <div class="form-row">
              <div class="form-group">
                <label class="form-label">题目类型 <span class="required">*</span></label>
                <select v-model="form.type" class="form-select">
                  <option value="choice">选择题</option>
                  <option value="calculation">计算题</option>
                  <option value="proof">证明题</option>
                </select>
              </div>

              <div class="form-group">
                <label class="form-label">难度 <span class="required">*</span></label>
                <select v-model="form.difficulty" class="form-select">
                  <option value="easy">简单</option>
                  <option value="medium">中等</option>
                  <option value="hard">困难</option>
                </select>
              </div>
            </div>

            <div class="form-group">
              <label class="form-label">标签</label>
              <div class="tags-input">
                <span v-for="(tag, index) in form.tags" :key="index" class="tag-item">
                  {{ tag }}
                  <button @click="removeTag(index)" class="tag-remove">×</button>
                </span>
                <input 
                  v-model="newTag" 
                  type="text" 
                  class="tag-input" 
                  placeholder="输入标签后按回车"
                  @keydown.enter.prevent="addTag"
                />
              </div>
              <span class="helper-text">按回车键添加标签，例如：极限、函数、中值定理</span>
            </div>
          </div>

          <div class="form-section">
            <h3 class="section-title">题目内容</h3>
            
            <div class="form-group">
              <label class="form-label">题目描述 <span class="required">*</span></label>
              <div class="input-with-button">
                <textarea 
                  v-model="form.description" 
                  class="form-textarea" 
                  rows="6"
                  placeholder="支持LaTeX公式，例如：$\lim_{x \to 0} \frac{\sin x}{x}$"
                ></textarea>
                <button 
                  type="button"
                  @click="openMathEditor('description')" 
                  class="math-btn"
                  title="插入数学公式"
                >
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
                    <path d="M3.5 18.5l6-6M9.5 12.5l3-3M15.5 6.5l3-3M5 19h3v-3M13 11h3V8M19 5h3V2"/>
                  </svg>
                  插入公式
                </button>
              </div>
              <span v-if="errors.description" class="error-text">{{ errors.description }}</span>
              <span class="helper-text">支持LaTeX公式：行内公式用 $...$，独立公式用 $$...$$，或点击"插入公式"按钮</span>
            </div>

            <!-- 选择题选项 -->
            <div v-if="form.type === 'choice'" class="form-group">
              <label class="form-label">选项 <span class="required">*</span></label>
              <div v-for="(option, index) in form.options" :key="index" class="option-row">
                <span class="option-label">{{ String.fromCharCode(65 + index) }}.</span>
                <input 
                  v-model="form.options[index]" 
                  type="text" 
                  class="form-input" 
                  :placeholder="'选项 ' + String.fromCharCode(65 + index)"
                />
                <button 
                  v-if="form.options.length > 2" 
                  @click="removeOption(index)" 
                  class="btn-icon-danger"
                  title="删除选项"
                >
                  <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
                    <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
                  </svg>
                </button>
              </div>
              <button @click="addOption" class="btn-secondary btn-sm">+ 添加选项</button>
              <span v-if="errors.options" class="error-text">{{ errors.options }}</span>
            </div>

            <div class="form-group">
              <label class="form-label">正确答案 <span class="required">*</span></label>
              <div class="input-with-button">
                <input 
                  v-model="form.correctAnswer" 
                  type="text" 
                  class="form-input" 
                  :placeholder="form.type === 'choice' ? '例如：A 或 AB（多选）' : '输入正确答案'"
                />
                <button 
                  type="button"
                  @click="openMathEditor('correctAnswer')" 
                  class="math-btn-inline"
                  title="插入数学公式"
                >
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
                    <path d="M3.5 18.5l6-6M9.5 12.5l3-3M15.5 6.5l3-3M5 19h3v-3M13 11h3V8M19 5h3V2"/>
                  </svg>
                  插入公式
                </button>
              </div>
              <span v-if="errors.correctAnswer" class="error-text">{{ errors.correctAnswer }}</span>
            </div>

            <div class="form-group">
              <label class="form-label">题解 <span class="required">*</span></label>
              <div class="input-with-button">
                <textarea 
                  v-model="form.solution" 
                  class="form-textarea" 
                  rows="8"
                  placeholder="详细的解题步骤和思路，支持LaTeX公式"
                ></textarea>
                <button 
                  type="button"
                  @click="openMathEditor('solution')" 
                  class="math-btn"
                  title="插入数学公式"
                >
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
                    <path d="M3.5 18.5l6-6M9.5 12.5l3-3M15.5 6.5l3-3M5 19h3v-3M13 11h3V8M19 5h3V2"/>
                  </svg>
                  插入公式
                </button>
              </div>
              <span v-if="errors.solution" class="error-text">{{ errors.solution }}</span>
            </div>
          </div>

          <!-- 预览区域 -->
          <div class="form-section">
            <h3 class="section-title">预览</h3>
            <div class="preview-box">
              <div class="preview-content">
                <h4 class="preview-title">{{ form.title || '题目标题' }}</h4>
                <div class="preview-meta">
                  <span class="meta-item">类型：{{ getTypeText(form.type) }}</span>
                  <span class="meta-item">难度：{{ getDifficultyText(form.difficulty) }}</span>
                </div>
                <div class="preview-description" v-html="renderedDescription"></div>
                
                <div v-if="form.type === 'choice' && form.options.length > 0" class="preview-options">
                  <div v-for="(option, index) in form.options" :key="index" class="preview-option">
                    {{ String.fromCharCode(65 + index) }}. {{ option }}
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 操作按钮 -->
          <div class="form-actions">
            <button @click="goBack" class="btn-cancel">取消</button>
            <button @click="handleSave" :disabled="submitting" class="btn-primary">
              {{ submitting ? '保存中...' : '保存题目' }}
            </button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 数学公式编辑器 -->
    <MathEditor 
      v-if="showMathEditor"
      @close="showMathEditor = false"
      @insert="handleInsertFormula"
    />
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useUserStore } from '../stores/user'
import { getCourses } from '../api/problem'
import { createProblem, updateProblem, getProblemForEdit } from '../api/problem-admin'
import { toast } from '../utils/toast'
import { renderMathInHTML } from '../utils/renderMath'
import MathEditor from '../components/MathEditor.vue'

const route = useRoute()
const router = useRouter()
const userStore = useUserStore()

// 权限检查
if (!userStore.isAdmin) {
  toast.error('无权限访问此页面')
  router.push('/problems')
}

const loading = ref(false)
const submitting = ref(false)
const isEditMode = computed(() => !!route.params.id)

// 课程和章节数据
const courses = ref([])
const chapters = computed(() => {
  if (!form.value.courseId) return []
  const course = courses.value.find(c => c.id === form.value.courseId)
  return course?.chapters || []
})

// 表单数据
const form = ref({
  courseId: '',
  chapterId: '',
  title: '',
  description: '',
  type: 'choice',
  difficulty: 'medium',
  tags: [],
  correctAnswer: '',
  solution: '',
  options: ['', '', '', ''] // 默认4个选项
})

// 标签输入
const newTag = ref('')

// 错误信息
const errors = ref({})

// 数学公式编辑器
const showMathEditor = ref(false)
const editingField = ref('') // 记录当前编辑的字段：description/correctAnswer/solution

// 渲染预览
const renderedDescription = computed(() => {
  if (!form.value.description) return '<p class="placeholder">题目描述...</p>'
  return renderMathInHTML(form.value.description)
})

onMounted(async () => {
  await loadCourses()
  
  // 如果是编辑模式，加载题目数据
  if (isEditMode.value) {
    await loadProblem()
  }
})

// 监听题目类型变化
watch(() => form.value.type, (newType) => {
  if (newType === 'choice' && form.value.options.length === 0) {
    form.value.options = ['', '', '', '']
  }
})

async function loadCourses() {
  try {
    const res = await getCourses()
    if (res.code === 200 && res.data) {
      courses.value = res.data
    }
  } catch (error) {
    console.error('加载课程失败:', error)
    // 使用模拟数据
    setMockCourses()
  }
}

function setMockCourses() {
  courses.value = [
    {
      id: 1,
      name: '高等数学',
      icon: '📐',
      chapters: [
        { id: 101, name: '第一章 函数与极限' },
        { id: 102, name: '第二章 导数与微分' },
        { id: 103, name: '第三章 微分中值定理' },
        { id: 104, name: '第四章 不定积分' },
        { id: 105, name: '第五章 定积分' }
      ]
    },
    {
      id: 2,
      name: '线性代数',
      icon: '📊',
      chapters: [
        { id: 201, name: '第一章 行列式' },
        { id: 202, name: '第二章 矩阵' },
        { id: 203, name: '第三章 向量' },
        { id: 204, name: '第四章 线性方程组' }
      ]
    },
    {
      id: 3,
      name: '概率论与数理统计',
      icon: '🎲',
      chapters: [
        { id: 301, name: '第一章 随机事件与概率' },
        { id: 302, name: '第二章 随机变量及其分布' },
        { id: 303, name: '第三章 多维随机变量' }
      ]
    }
  ]
}

async function loadProblem() {
  loading.value = true
  try {
    const res = await getProblemForEdit(route.params.id)
    if (res.code === 200 && res.data) {
      const data = res.data
      form.value = {
        courseId: data.courseId || data.course_id || '',
        chapterId: data.chapterId || data.chapter_id || '',
        title: data.title || '',
        description: data.description || '',
        type: data.type || 'choice',
        difficulty: data.difficulty || 'medium',
        tags: data.tags || [],
        correctAnswer: data.correctAnswer || data.correct_answer || '',
        solution: data.solution || '',
        options: data.options || ['', '', '', '']
      }
    }
  } catch (error) {
    console.error('加载题目失败:', error)
    toast.error('加载题目失败')
  } finally {
    loading.value = false
  }
}

function onCourseChange() {
  form.value.chapterId = ''
}

function addTag() {
  const tag = newTag.value.trim()
  if (tag && !form.value.tags.includes(tag)) {
    form.value.tags.push(tag)
    newTag.value = ''
  }
}

function removeTag(index) {
  form.value.tags.splice(index, 1)
}

function addOption() {
  form.value.options.push('')
}

function removeOption(index) {
  if (form.value.options.length > 2) {
    form.value.options.splice(index, 1)
  }
}

function validateForm() {
  errors.value = {}
  
  if (!form.value.courseId) {
    errors.value.courseId = '请选择课程'
  }
  
  if (!form.value.chapterId) {
    errors.value.chapterId = '请选择章节'
  }
  
  if (!form.value.title.trim()) {
    errors.value.title = '请输入题目标题'
  }
  
  if (!form.value.description.trim()) {
    errors.value.description = '请输入题目描述'
  }
  
  if (form.value.type === 'choice') {
    const validOptions = form.value.options.filter(opt => opt.trim())
    if (validOptions.length < 2) {
      errors.value.options = '选择题至少需要2个选项'
    }
  }
  
  if (!form.value.correctAnswer.trim()) {
    errors.value.correctAnswer = '请输入正确答案'
  }
  
  if (!form.value.solution.trim()) {
    errors.value.solution = '请输入题解'
  }
  
  return Object.keys(errors.value).length === 0
}

async function handleSave() {
  if (!validateForm()) {
    toast.error('请完善表单信息')
    return
  }
  
  submitting.value = true
  
  try {
    // 准备提交数据
    const submitData = {
      courseId: form.value.courseId,
      chapterId: form.value.chapterId,
      title: form.value.title.trim(),
      description: form.value.description.trim(),
      type: form.value.type,
      difficulty: form.value.difficulty,
      tags: form.value.tags,
      correctAnswer: form.value.correctAnswer.trim(),
      solution: form.value.solution.trim()
    }
    
    // 如果是选择题，添加选项
    if (form.value.type === 'choice') {
      submitData.options = form.value.options.filter(opt => opt.trim())
    }
    
    let res
    if (isEditMode.value) {
      res = await updateProblem(route.params.id, submitData)
    } else {
      res = await createProblem(submitData)
    }
    
    if (res.code === 200) {
      toast.success(isEditMode.value ? '题目更新成功' : '题目创建成功')
      
      // 跳转到题目详情页
      const problemId = isEditMode.value ? route.params.id : res.data.id
      router.push(`/problem/${problemId}`)
    }
  } catch (error) {
    console.error('保存题目失败:', error)
    toast.error(error.message || '保存失败，请重试')
  } finally {
    submitting.value = false
  }
}

function goBack() {
  router.back()
}

function getTypeText(type) {
  const map = {
    choice: '选择题',
    calculation: '计算题',
    proof: '证明题'
  }
  return map[type] || type
}

function getDifficultyText(difficulty) {
  const map = {
    easy: '简单',
    medium: '中等',
    hard: '困难'
  }
  return map[difficulty] || difficulty
}

// 打开数学公式编辑器
function openMathEditor(field) {
  editingField.value = field
  showMathEditor.value = true
}

// 插入数学公式
function handleInsertFormula(latex) {
  const field = editingField.value
  if (!field) return
  
  // 在当前光标位置插入公式（用 $ 包裹）
  const formula = `$${latex}$`
  
  if (field === 'description') {
    form.value.description += formula
  } else if (field === 'correctAnswer') {
    form.value.correctAnswer += formula
  } else if (field === 'solution') {
    form.value.solution += formula
  }
  
  showMathEditor.value = false
}
</script>

<style scoped lang="scss">
.problem-edit-page {
  min-height: 100vh;
  background: #f8f9fa;
}

.top-navbar {
  background: white;
  border-bottom: 1px solid #e1e4e8;
  position: sticky;
  top: 0;
  z-index: 100;
  
  .navbar-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .navbar-left {
    .logo-link {
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 12px;
      
      .logo-icon {
        display: block;
        filter: drop-shadow(0 2px 8px rgba(102, 126, 234, 0.3));
      }
      
      .logo {
        font-size: 24px;
        font-weight: bold;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }
    }
  }
  
  .navbar-center {
    .page-title {
      font-size: 18px;
      font-weight: 600;
      color: #24292f;
    }
  }
  
  .navbar-right {
    .btn-back {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 16px;
      background: white;
      border: 1px solid #d0d7de;
      border-radius: 6px;
      font-size: 14px;
      color: #57606a;
      cursor: pointer;
      transition: all 0.2s;
      
      &:hover {
        background: #f6f8fa;
        border-color: #c1c7cd;
      }
    }
  }
}

.main-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
  
  .content-container {
    background: white;
    border-radius: 8px;
    padding: 32px;
    min-height: calc(100vh - 108px);
  }
}

.loading {
  padding: 60px 20px;
  text-align: center;
  
  svg {
    animation: spin 1s linear infinite;
    color: #667eea;
    margin-bottom: 16px;
  }
  
  p {
    color: #8c959f;
    font-size: 14px;
    margin: 0;
  }
}

.edit-form {
  max-width: 900px;
  margin: 0 auto;
}

.form-section {
  margin-bottom: 40px;
  
  &:last-of-type {
    margin-bottom: 0;
  }
  
  .section-title {
    font-size: 20px;
    font-weight: 600;
    color: #24292f;
    margin: 0 0 24px 0;
    padding-bottom: 12px;
    border-bottom: 2px solid #e1e4e8;
  }
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 20px;
  
  .form-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #24292f;
    margin-bottom: 8px;
    
    .required {
      color: #cf222e;
      margin-left: 2px;
    }
  }
  
  .input-with-button {
    position: relative;
    
    .form-input,
    .form-textarea {
      padding-right: 120px; // 为按钮留出空间
    }
  }
  
  .math-btn,
  .math-btn-inline {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
    z-index: 10;
    
    &:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }
    
    svg {
      flex-shrink: 0;
    }
  }
  
  .math-btn-inline {
    // 对于单行输入框，调整位置
  }
  
  .form-input,
  .form-select,
  .form-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: all 0.2s;
    
    &:focus {
      border-color: #667eea;
      box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }
    
    &:disabled {
      background: #f6f8fa;
      color: #8c959f;
      cursor: not-allowed;
    }
  }
  
  .form-textarea {
    resize: vertical;
    line-height: 1.6;
  }
  
  .error-text {
    display: block;
    font-size: 12px;
    color: #cf222e;
    margin-top: 6px;
  }
  
  .helper-text {
    display: block;
    font-size: 12px;
    color: #57606a;
    margin-top: 6px;
  }
}

.tags-input {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  min-height: 44px;
  
  &:focus-within {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
  }
  
  .tag-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #f6f8fa;
    border: 1px solid #d0d7de;
    border-radius: 4px;
    font-size: 13px;
    color: #24292f;
    
    .tag-remove {
      background: none;
      border: none;
      font-size: 18px;
      color: #57606a;
      cursor: pointer;
      padding: 0;
      line-height: 1;
      
      &:hover {
        color: #cf222e;
      }
    }
  }
  
  .tag-input {
    flex: 1;
    min-width: 120px;
    border: none;
    outline: none;
    font-size: 14px;
  }
}

.option-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  
  .option-label {
    font-size: 14px;
    font-weight: 500;
    color: #57606a;
    width: 24px;
    flex-shrink: 0;
  }
  
  .form-input {
    margin-bottom: 0;
  }
}

.btn-icon-danger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: white;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
  
  &:hover {
    background: #ffebe9;
    border-color: #cf222e;
    color: #cf222e;
  }
}

.btn-secondary {
  padding: 8px 16px;
  background: white;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  font-size: 14px;
  color: #24292f;
  cursor: pointer;
  transition: all 0.2s;
  
  &:hover {
    background: #f6f8fa;
    border-color: #c1c7cd;
  }
  
  &.btn-sm {
    padding: 6px 12px;
    font-size: 13px;
  }
}

.preview-box {
  border: 1px solid #d0d7de;
  border-radius: 8px;
  padding: 24px;
  background: #fafbfc;
  
  .preview-content {
    .preview-title {
      font-size: 20px;
      font-weight: 600;
      color: #24292f;
      margin: 0 0 12px 0;
    }
    
    .preview-meta {
      display: flex;
      gap: 16px;
      margin-bottom: 20px;
      
      .meta-item {
        font-size: 13px;
        color: #57606a;
      }
    }
    
    .preview-description {
      font-size: 15px;
      line-height: 1.8;
      color: #24292f;
      margin-bottom: 20px;
      
      .placeholder {
        color: #8c959f;
        font-style: italic;
      }
    }
    
    .preview-options {
      .preview-option {
        padding: 10px;
        background: white;
        border: 1px solid #d0d7de;
        border-radius: 6px;
        margin-bottom: 8px;
        font-size: 14px;
        color: #24292f;
      }
    }
  }
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #e1e4e8;
  
  .btn-cancel {
    padding: 10px 24px;
    background: white;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    font-size: 14px;
    color: #24292f;
    cursor: pointer;
    transition: all 0.2s;
    
    &:hover {
      background: #f6f8fa;
      border-color: #c1c7cd;
    }
  }
  
  .btn-primary {
    padding: 10px 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 6px;
    font-size: 14px;
    color: white;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    
    &:hover:not(:disabled) {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    }
    
    &:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>

